<template>
    <div>
      <el-row>
        <el-col :span="3"> 
          <el-input v-model="job_type" placeholder="请输入厂家名称"></el-input>
        </el-col>
        <el-col :span="4">
          <el-button @click="job_type_click" class="add_btn"  icon="el-icon-search"> 搜索</el-button>
          <el-button @click="add_jobtype" icon="el-icon-plus" class="add_btn">新增厂家</el-button>
        </el-col>
      </el-row>
  
      <el-table :data="dataList" stripe style="width: 100%" border>
        <el-table-column prop="id" label="ID">
        </el-table-column>
        <el-table-column prop="name" label="厂家名称">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="set_product(scope.row)" type="text" icon="el-icon-edit">编辑</el-button>
            <el-popconfirm confirm-button-text='确定' cancel-button-text='取消' icon="el-icon-info" icon-color="red"
              title="是否删除这条数据？" @confirm='del_product(scope.row)'>
              <el-button slot="reference" type="text" icon="el-icon-delete"> 删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
  
      <div class="pagination">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background @prev-click='prev'
          @next-click='next' :current-page.sync="pagination.page" :page-size="pagination.per_page"
          layout="total, prev, pager, next" :total="total">
        </el-pagination>
      </div>
  
  
      <el-dialog :title="title" :visible.sync="isProduct" width="30%" :close-on-click-modal='false'>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="厂家名称" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="isProduct = false">取 消</el-button>
          <el-button type="primary" @click="submitadd('ruleForm')">确定</el-button>
        </span>
      </el-dialog>
    </div>
  </template>
  
  <script>
    import {
        getBranchFactoryList,
        createBranchFactory,
        delBranchFactory
    } from '@/api/product/index'
    export default {
      data() {
        return {
          job_type:'',
          title: '',
          isProduct: false,
          dataList: [],
          pagination: {
            per_page:15,
            page: 1,
          },
          total: 0,
          ruleForm: {
            id: '',
            name: '',  
          },
          rules: {
            name: [{required: true,message: '请输入生产厂家',trigger: 'blur'}],
          }
        }
      },
      mounted() {
        this.getlist()
      },
      methods: {
        set_product(row){
          this.ruleForm.name=row.name
          this.ruleForm.id=row.id
          this.title = '编辑生产厂家'
          this.isProduct = true
        },
        add_jobtype() {
          this.title = '新增生产厂家'
          this.isProduct = true
          this.$nextTick(function(){
            this.$refs.ruleForm.resetFields()
          })
        },
        submitadd(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
                createBranchFactory(this.ruleForm).then(res => {
                if (res.code == 200) {
                  this.isProduct = false
                  this.$message.success('提交成功')
                  this.getlist()
                }
              })
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        },
        getlist() {
            getBranchFactoryList({...this.pagination,...this.ser}).then(res => {
            if (res.code == 200) {
              this.dataList = res.data.data
              this.total = res.data.total
            }
          })
        },
        handleSizeChange(val) {
          
          console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
          console.log(`当前页: ${val}`);
          this.pagination.page = val
          this.getlist()
        },
        prev() {
          this.pagination.page = this.pagination.page - 1
          this.getlist()
        },
        next() {
          this.pagination.page = this.pagination.page + 1
          this.getlist()
        },
        del_product(row) {
            delBranchFactory({
            id: row.id
          }).then(res => {
            if (res.code == 200) {
              this.isProduct = false
              this.$message.success('提交成功')
              this.getlist()
            }
          })
        },
        job_type_click(){
          this.pagination= {
              per_page: 10,
              page: 1,
          }
          getBranchFactoryList({job_type:this.job_type,...this.pagination}).then(res => {
            if (res.code == 200) {
              this.dataList = res.data.data
              this.total = res.data.total
            }
          })
        }
      }
    }
  </script>
  
  <style>
  </style>
  